<template>
  <div class="wrapper">
    <JForm :form-config="dynamicValidateForm" :read="read" @handleBoxEvent="handleBoxEvent" />
  </div>
</template>

<script>
import JForm from '@/components/JForm'
export default {
  name: 'ClientUpdate',
  components: { JForm },
  props: {
    client: {
      type: Object,
      default: () => ({})
    },
    read: {
      type: Boolean,
      default: false
    }
  },
  data() {
    const userInfo = [
      {
        name: 'name',
        label: '客户端名称',
        type: 'string',
        required: true
      },
      {
        name: 'clientCode',
        label: '客户端编码',
        type: 'string',
        required: false
      },
      {
        name: 'clientSecret',
        label: '客户端密钥',
        type: 'string',
        required: true
      },
      {
        name: 'accessTokenValidity',
        label: 'token时长',
        type: 'string',
        required: false,
        placeholder: 'token有效时长 单位秒'
      },
      {
        name: 'refreshTokenValidity',
        label: 'Rtoken时长',
        type: 'string',
        required: false,
        placeholder: '刷新token有效时长 单位秒'
      },
      {
        name: 'sortNum',
        label: '排序',
        type: 'string',
        required: false,
        placeholder: ''
      },
      {
        name: 'note',
        label: '备注',
        type: 'email',
        required: false
      }
    ]
    return {
      // dynamicValidateForm: userInfo,
      userInfo,
      formData: {}
    }
  },
  computed: {
    dynamicValidateForm() {
      const data = this.userInfo
      const values = this.formData
      const result = []
      data.forEach(i => {
        const { type, name } = i
        if (type === 'option') {
          i.config.options = this.filterOption(i)
        }
        i.value = values[name] || ''
        result.push(i)
      })
      return result
    }
  },
  watch: {
    client: {
      handler: function(newVal) {
        if (newVal) {
          this.formData = newVal
        }
      },
      immediate: true
    }
  },
  created() {},
  mounted() {},
  methods: {
    handleBoxEvent(emitObj) {
      this.submitForm(emitObj)
    },
    filterOption(item) {
      const key = item.name
      return this[`${key}Option`]
    },
    submitForm(emitObj) {
      this.$emit('handleBoxEvent', { target: emitObj })
    }
  }
}
</script>
<style lang="scss" scoped>
.wrapper{
   padding: 0px;
   margin: 0px;
}
</style>
